<template>
  <el-form ref="ruleForm"
           :model="form"
           label-width="110px"
           label-position="right"
           size="small"
           :rules="rules">
    <div class="car_type_model">
      <el-form-item label="车型"
                    prop="vehicleType">
        <div class="img-box">
          <span v-for="(item) in vehicleModels"
                :key="item.value"
                :label="item.value + ',' + item.name"
                class="imgSty"
                :class="item.name === form.vehicleType ? 'active' : ''"
                @click="handleSelectCar(item)">
            <img class="iconSty"
                 :src="item.image"
                 alt="">
            <span>{{ item.name }}</span>
          </span>
        </div>
      </el-form-item>
      <el-row v-if="form.vehicleType">
        <el-col :span="6">
          <el-form-item label="车身长"
                        prop="vehicleLength"
                        :rules="[
                {
                  required: true,
                  message: `请选择正确的车身长`,
                  validator: validateCarLength,
                  trigger: ['change', 'blur']
                }
              ]">
            <el-select v-model="form.vehicleLength"
                       filterable
                       clearable
                       style="width: 95%"
                       @change="handleLength">
              <el-option v-for="item in specOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="isReadonly"
                :span="6">
          <div class="describeSty">
            最大承载体积{{
            form.vehicleVolume || 0
          }}立方米；最大承载重量{{ form.vehicleWeight || 0 }}吨
          </div>
        </el-col>
        <div v-else>
          <el-col :span="6">
            <el-form-item label="容积"
                          prop="vehicleVolume"
                          :rules="[
                {
                  required: true,
                  message: `容积最多为3位整数，2位小数`,
                  validator: validateCarVolume,
                  trigger: ['change', 'blur']
                }
              ]">
              <el-input v-model="form.vehicleVolume"
                        placeholder="请输入容积"
                        oninput="this.value=(this.value.match(/\d{0,3}(\.\d{0,2})?/)||[''])[0];"
                        @input="updateInput($event, 'volume')">
                <template slot="append">立方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="载重"
                          prop="vehicleWeight"
                          :rules="[
                {
                  required: true,
                  message: `载重最多为2位整数，2位小数`,
                  validator: validateCarWeight,
                  trigger: ['change', 'blur']
                }
              ]">
              <el-input v-model="form.vehicleWeight"
                        placeholder="请输入载重"
                        oninput="this.value=(this.value.match(/\d{0,2}(\.\d{0,2})?/)||[''])[0];"
                        @input="updateInput($event, 'weight')">
                <template slot="append">吨</template>
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
    </div>
  </el-form>
</template>

<script>
import validateForm from "./validateForm.js";
import { loadVehicleModels } from "@basic/assets/vehicle.models";
import vehicleModels from "@basic/assets/vehicle.models";
export default {
  name: "ModelsSelect",
  mixins: [validateForm],
  props: {
    record: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      specOptions: [],
      isReadonly: false,
      rules: {
        vehicleType: [{ required: true, message: `请选择车型`, trigger: 'change' }],
        vehicleLength: [{ required: true, message: "请选择车身长", trigger: "change" }],
        vehicleVolume: [{ required: true, message: `请输入容积`, trigger: ['change', 'blur'] }],
        vehicleWeight: [{ required: true, message: `请输入载重`, trigger: ['change', 'blur'] }],
      },
      form: {
        vehicleLength: null,
        vehicleType: null,
        vehicleVolume: null,
        vehicleWeight: null
      },
      recordErrors: [],
      carLengthFlag: true, // 车身长错误
    };
  },
  computed: {
    vehicleModels () {
      // 车型存在 匹配车身长数据
      if (this.form.vehicleType) {
        vehicleModels.value.map(item => {
          if (item.name === this.form.vehicleType) {
            this.specOptions = item.length;
          }
        })
      }
      return vehicleModels.value;
    }
  },
  created () {
    loadVehicleModels();
    this.form = {
      vehicleLength: this.record.vehicleLength,
      vehicleType: this.record.vehicleModel,
      vehicleVolume: this.record.vehicleVolume,
      vehicleWeight: this.record.vehicleLoad
    };
    this.recordErrors = this.record?.errors || []
    this.isReadonly = this.form.vehicleLength === '其他' ? false : true;
  },
  mounted () {
    this.validateForm();
  },
  methods: {
    // 校验规则
    validateForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
    },
    initData () {
      this.form.vehicleLength = "";
      this.form.vehicleVolume = "";
      this.form.vehicleWeight = "";
    },
    /**
     * 选择车辆
     */
    handleSelectCar (item) {
      this.initData();
      this.specOptions = item.length;
      this.form.vehicleType = item.name;
      this.$emit("confirm", { vehicleModel: item.name });
    },
    /**
     * 选择车身长
     */
    handleLength (val) {
      this.isReadonly = false;
      const selectItem = {};
      this.specOptions.forEach((item) => {
        if (item.label == val) Object.assign(selectItem, item);
      });
      this.carLengthFlag = false;
      this.form.vehicleVolume = selectItem.volume || null;
      this.form.vehicleWeight = selectItem.load || null;
      if (this.form.vehicleVolume && this.form.vehicleWeight) {
        this.isReadonly = true;
      }
      this.$emit("confirm", {
        vehicleLength: val,
        vehicleLoad: selectItem.load,
        vehicleVolume: selectItem.volume
      });
    },
    updateInput (val, type) {
      if (!val) return false;
      if (type === "volume") {
        this.$emit("confirm", { vehicleVolume: val });
      } else {
        this.$emit("confirm", { vehicleLoad: val });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.car-lable {
  width: 120px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--prev-color-text-regular);
}
.car-lable-icon {
  color: var(--prev-icon-color-orange);
  margin-right: 4px;
}
.car_type_model {
  .img-box {
    width: 100%;
    overflow: auto;
    white-space: nowrap;
  }
  .imgSty {
    cursor: pointer;
    border: 1px solid #eee;
    width: 108px;
    height: 108px;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 20px;
    * {
      padding: 0;
      margin: 0;
    }
    .iconSty {
      width: 108px;
      height: 78px;
      overflow: hidden;
    }
    > span {
      line-height: 30px;
      height: 30px;
      text-align: center;
      display: block;
      margin-top: -15px;
    }
  }
  .dialog-footer {
    display: block;
  }
  .active {
    width: 130px !important;
    height: 130px !important;
    border: 2px solid var(--prev-color-primary);
    background-color: #fff5f1;
    opacity: 1;
    .iconSty {
      width: 106px;
      height: 98px;
      margin-left: 12px;
      margin-bottom: 8px;
      overflow: hidden;
    }
  }
  ::v-deep .el-input--small {
    margin-right: 10px;
  }
}
.describeSty {
  font-size: 13px;
  line-height: 40px;
  color: var(--prev-color-primary);
}
.ml42 {
  margin-left: 42px;
}
</style>
